<template>
  <div class="item" data-type="word" v-bind:class="[('w'+obj.property.selfWidth)]">
    <div class="i6d6">
      <div class="word-box" :class="{'word-autoh':!this.isOpen}" v-bind:style="{textAlign:obj.property.introAlign}">
         <span>{{this.isOpen&&obj.property.word.text.length>this.limitLenth?obj.property.word.text.substring(0,this.limitLenth)+"...":obj.property.word.text}}</span> 
         <a href="javascript:;" class="switch-btn" v-on:click="click_open_close" v-show="obj.property.word.text.length>this.limitLenth">{{this.isOpen ? '展开↓' : '收起↑'}}</a>
      </div>
      
      <v-handle v-bind:handle="obj.handle"></v-handle>
    </div>
  </div>
</template>

<script>
export default {
  props: ['obj'],
  data:function(){
    return {
      isOpen:true,
      limitLenth:this.obj.property.word.limitLength
    }
  },
  methods: {
    click_open_close: function () {
      this.isOpen=!this.isOpen
    }
  }
}
</script>
